import { AtActivityIndicator, AtButton, AtFloatLayout, AtIcon, AtTag } from 'taro-ui'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux'
import { Image, Text, View } from '@tarojs/components'
import React from 'react'
import AxMap from '../axmap/AxMap'
import { getToken, getUser, setUser } from '../../actions/user'
import { loginWXMP, refershToken } from '../../actions/login'
import { locationUpdate } from '../../actions/location'
import { findCabinets, getCabinets } from '../../actions/cabinets'
import { setCabinetId, setLocationVisible } from '../../actions/global'
import ScanQrCodeButton from '../Buttons/ScanQrCodeButton'

class CarRentalMap extends React.Component {

  state = {
    current: 0,
    locationDetailVisible: false,
    footerValue: 0
  }

  onMarkTap (value) {
    console.log(this.props.detailLogin)
    this.props.getCabinets(value.detail.markerId)
    this.setState({
      locationDetailVisible: !this.state.locationDetailVisible
    }, () => {
      this.props.setLocationVisible(true, 'carmap')
    })
    console.log(value)
  }

  handleClose () {
    this.setState({
      locationDetailVisible: false
    })
  }

  getQueryVariable (uri, variable) {
    var query = uri.split('?')[1]
    var vars = query.split("&")
    for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=")
            if(pair[0] == variable) return pair[1]
    }
    return(false);
  }

  scanQrClick () {
    this.props.refershToken(this.props.login.token.refresh_token)
    Taro.scanCode({
      success: (res => {
        let {result, errMsg} = res
        let eid = 0
        if (errMsg === 'scanCode:ok') {
          eid = this.getQueryVariable(result, 'eid')
          this.props.setCabinetId(eid)
          Taro.navigateTo({
            url: '/pages/cabinet/Cabinet?eid=' + eid
          })
        }
        Taro.atMessage({
          type: 'info',
          message: '扫码成功'
        })
      }),
      fail: (e => {console.error(e)})
    })
  }

  goCabinet () {
    Taro.openLocation({
      latitude: this.props.cabinet.place.coordinate.latitude,
      longitude: this.props.cabinet.place.coordinate.longitude,
      name: this.props.cabinet.name,
      address: this.props.cabinet.place.address
    })
  }

  render () {
    const ScanButton = () => {
      return (
        <ScanQrCodeButton buttonText='扫码租车' name='123' onClick={this.scanQrClick.bind(this)}></ScanQrCodeButton>
      )
    }
    return (
      <View style='height: 100%;position: relative;'>
        <View style='padding: 1.5rem 2rem; box-sizing: border-box; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 999'>
          {ScanButton()}
        </View>
        <AxMap onMarkTap={this.onMarkTap.bind(this)} mapId='ax-cabinet-map'>
        </AxMap>
      </View>
    )
  }
}

// 将 reducer 中的状态插入到组件的 props 中
// 下面是单个reducer的时候，多个的时候需要选传入哪个reducer
// const { test, count } = state
const mapStateToProps = (state) => ({
  user: state.user,
  login: state.login,
  cabinets: state.cabinets.cabinets,
  detailLogin: state.cabinets.detailLogin,
  cabinet: state.cabinets.cabinet
})

// 将 对应action 插入到组件的 props 中
const mapDispatchToProps = (dispatch) => ({
  getUser () {
    dispatch(getUser())
  },
  getToken () {
    dispatch(getToken())
  },
  setUser (user) {
    dispatch(setUser(user))
  },
  refershToken (token) {
    dispatch(refershToken(token))
  },
  toLogin () {
    dispatch(loginWXMP())
  },
  updateLocation() {
    dispatch(locationUpdate())
  },
  updateCabinets () {
    dispatch(findCabinets())
  },
  getCabinets (id) {
    dispatch(getCabinets(id))
  },
  setCabinetId (id) {
    dispatch(setCabinetId(id))
  },
  setLocationVisible (visible, type) {
    dispatch(setLocationVisible(visible, type))
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(CarRentalMap)
